<template>
	<view class="my-list-wrap">
		<view class="item-wrap" v-for="(item, index) in listData" :key="item.id">
			<view class="img-container" v-if="item.img">
				<image class="img" :src="item.img" mode="scaleToFill"></image>
			</view>
			<view class="text-container" :style="textContainerStyle">
				<text class="maintitle" :style="mainTextStyle"  v-if="item.mainText">{{ item.mainText }}</text>
				<text class="subtitle" :style="subTextStyle"  v-if="item.subText">{{ item.subText }}</text>
			</view>
			<view class="icon iconfont iconiconfontjiantou5 icon-container"></view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			list:{
				type: Array,
				default: () => [],
			},
			textBoxStyle:{
				type: Object,
				default: null,
			},
			
			customMainText:{
				type: Object,
				default: null,
			}
		},
		watch:{
			list(n, o){
				this.listData = n;
			},
			textBoxStyle(n, o){
				this.textContainerStyle = n;
			},
			
			customMainText(n, o){
				this.mainTextStyle = n;
			}
		},
		data(){
			return{
				listData: this.list,
				textContainerStyle: this.textBoxStyle ? this.textBoxStyle : null,
				mainTextStyle:  this.customMainText ? this.customMainText : null,
				subTextStyle: null,
			}
		}
	}
</script>

<style lang="scss" scoped>
.my-list-wrap{
	padding-top: 20rpx;
	.item-wrap{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 22rpx;
		border-radius: 24rpx;
		background: #F1F3F6;
		// box-shadow:  5px 5px 30px #e0e2e5,  -10px -10px 20px #ffffff;
		// box-shadow:  6rpx 6px 20rpx #e0e2e5, 
		//              -2rpx -10rpx 20rpx #ffffff;
		box-shadow: -3px 3px 6px #bbc4d3, 3px -4px 6px #ffffff;
		margin-bottom: 80rpx;
		margin-left: 12rpx;
		margin-right: 12rpx;
		border-radius: 24rpx;
		.img-container{
			width: 110rpx;
			height: 110rpx;
			
			.img{
				width: 100%;
				height: 100%;
				border-radius: 24rpx;
			}
		}
		
		.text-container{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			padding: 0 40rpx;
			height: 110rpx;
			
			.maintitle{
				font-size: 44rpx;
				line-height: 44rpx;
				color: $my-app-primary-color;
			}
			.subtitle{
				font-size: 24rpx;
				line-height: 24rpx;
				color: $my-app-default-color;
				width: 236rpx;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
		}
		
		.icon-container{
			color: $my-app-primary-color;
		}
	}
}
</style>
